<template>
  <div class="app-container">

    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.checktime"
        type="daterange"
        range-separator="至"
        class="filter-item"
        style="width:300px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>


      <el-button-group class="filter-item">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-paperclip"
          @click="explortExcel"
        >
          导出
        </el-button>
      </el-button-group>

    </div>
    <el-table
      v-loading="listLoading"
      :data="rankData"
      id="table"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      stripe
      row-class-name="rowpadding"
      header-row-class-name="headerClass"
      class="table-container"
      highlight-current-row
      show-summary
      ref="customerReportDateTable"
      :summary-method="summaryMethod"
    >

      <el-table-column
        width="200"
        label="省直机构名"
        align="center"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{ scope.row.name }}</div>
        </template>
      </el-table-column>

      <el-table-column
        label="收件量"
        width="135"
        prop="shoudao"
        sortable
        align="center"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{ scope.row.shoudao }}</div>
        </template>
      </el-table-column>


      <el-table-column
        label="办结量"
        sortable
        width="135"
        prop="banjie"
        align="center"
      >
        <template slot-scope="scope">
          <div class="fontSize"> {{ scope.row.banjie }}</div>
        </template>
      </el-table-column>


      <el-table-column
        label="正常办理中"
        width="135"
        align="center"
        sortable
        prop="zcbanli"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{ scope.row.zcbanli }}</div>
        </template>
      </el-table-column>

      <el-table-column
        label="超期件"
        width="135"
        align="center"
        sortable
        prop="chaoqi"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{ scope.row.chaoqi }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="按时办结量"
        width="135"
        align="center"
        sortable
        prop="anshibanjie"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{ scope.row.anshibanjie }}</div>
        </template>
      </el-table-column>


      <el-table-column
        label="按时办结率"
        width="135"
        align="center"
        prop="anshibanjielv"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{
              ((scope.row.anshibanjie / (Number(scope.row.anshibanjie) + Number(scope.row.chaoqi))) * 100).toFixed(2) + '%'
            }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="满意度"
        width="135"
        align="center"
        prop="manyidu"
      >
        <template slot-scope="scope">
          <div class="fontSize">
            {{ (((Number(scope.row.banjie) - Number(scope.row.manyishu)) / scope.row.banjie) * 100).toFixed(2) + '%' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="不满意数"
        width="135"
        align="center"
        prop="manyishu"
      >
        <template slot-scope="scope">
          <div class="fontSize">{{ scope.row.manyishu }}</div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<style>
.fontSize {
  font-size: 14px;
}

.rowpadding {
  padding: 20px 0 !important;
}

.headerClass {
  background: #409EFF;
}
</style>
<script>
import exportExecl from '@/utils/excel'
import { getCountType, getRankData } from '@/api/rank'

let id = 0
export default {
  data() {
    return {
      total: 0,
      list: [],
      drawer: true,
      rankData: [],
      countTypeData: [],
      listLoading: false,
      listQuery: {
        checktime: ['2023-11-1', '2023-11-15'],             //时间范围
        chart: 5,         //筛选条件
      },
      baseData: [],
      dialogVisible: false,
      dialogType: 'create',
      loading: false
    }
  },
  created() {
    this.CountType()
    this.fetchData()
  },
  updated() {

    this.$nextTick(() => {

      this.$refs.customerReportDateTable.doLayout()

    })

  },
  computed:{
    call_all:function(data){
      let temp=[]
      return temp.data=data
    }
  },
  methods: {
    summaryMethod(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        const props = data.map(item => column.property)
        if (props.every(value => (value == 'anshibanjielv'))) {
          let values2 = data.map(item => Number(item['anshibanjie']))
          let valueschaoshi = data.map(item => Number(item['chaoqi']))
          let smsindex = values2.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          let smsindex2 = valueschaoshi.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = ((smsindex / (smsindex + smsindex2)) * 100).toFixed(2) + '%'
        } else if (props.every(value => (value == 'manyidu'))) {
          let values2 = data.map(item => Number(item['banjie']))
          let valueschaoshi = data.map(item => Number(item['manyishu']))
          let smsindex = values2.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          let smsindex2 = valueschaoshi.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = (((smsindex - smsindex2) / smsindex) * 100).toFixed(2) + '%'
        } else {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ''
        }
      })

      return sums
    },
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        chart: 1,
        checktime: '',
        looktype: 0
      }
      this.CountType()
    },
    CountType(column) {
      getCountType().then(response => {
        this.countTypeData = response.data
      })
    },
    explortExcel() {
      let c = this.countTypeData.find((item, index) => item.value == this.listQuery.chart)
      let fileName = (this.listQuery.checktime[0]) + '至' + (this.listQuery.checktime[1]) + '的' + c.label
      exportExecl('table', fileName + '.xlsx')
    },
    fetchData() {
      if (!this.listQuery.checktime || !this.listQuery.chart) {
        this.$message({
          message: '请完善筛选条件',
          type: 'error'
        })
        return false
      }
      this.listLoading = true
      getRankData(this.listQuery).then(response => {
        this.listLoading = false
        this.rankData = response.data
      })
    }
  }
}
</script>
